<template>
  <el-dialog width="70%" :title="title">
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
      <!-- 新建客户 -->
      <el-form-item label="新建客户">
        <el-input v-model="formData.customerName" disabled></el-input>
      </el-form-item>

      <!-- 新建联系人 -->
      <el-form-item label="新建联系人">
        <el-input v-model="formData.contactName" disabled></el-input>
      </el-form-item>

      <!-- 为客户创建交易 -->
      <el-form-item>
        <el-checkbox v-model="formData.createTransaction">为客户创建交易</el-checkbox>
      </el-form-item>

      <!-- 金额 -->
      <el-form-item label="金额" v-if="formData.createTransaction">
        <el-input v-model="formData.amount" placeholder="请输入金额"></el-input>
      </el-form-item>

      <!-- 交易名称 -->
      <el-form-item label="交易名称" v-if="formData.createTransaction">
        <el-input v-model="formData.transactionName" placeholder="请输入交易名称"></el-input>
      </el-form-item>

      <!-- 预计成交日期 -->
      <el-form-item label="预计成交日期" v-if="formData.createTransaction">
        <el-date-picker v-model="formData.estimatedDate" value-format="YYYY-MM-DD" type="date" placeholder="选择日期"
          style="width: 100%;"></el-date-picker>
      </el-form-item>

      <!-- 阶段 -->
      <el-form-item label="阶段" v-if="formData.createTransaction">
        <el-select v-model="formData.stage" placeholder="请选择阶段">
          <el-option v-for="item in stages" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <!-- 市场活动来源 -->
      <el-form-item label="市场活动来源" v-if="formData.createTransaction">

        <el-input style="width: 80%; margin-right: 1%;"  disabled v-model="formData.marketName" placeholder="点击下面搜索" />
        <el-button color="cyan" type="primary" @click="openActivityTable">
          <svg-icon icon="搜索" /> <span></span> 搜索
        </el-button>
      </el-form-item>

      <!-- 记录的所有者 -->
      <el-form-item label="记录的所有者">
        <span>{{ formData.owner }}</span>
      </el-form-item>

      <!-- 按钮组 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">转换</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>

    <activiyTable :clueId="clueId" v-model="activiyTableVisible" :setMarketSource="setMarketSource" :activiyTableVisible="activiyTableVisible">
    </activiyTable>

  </el-dialog>

</template>

<script setup>
import { ref, reactive, defineProps, watch, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
import requestUtil, { getImageUrl } from "@/util/request";
import activiyTable from './activiyTable.vue';


const props = defineProps(
  {
    clueId: {
      type: String,
      default: "",
      required: true
    },
    convertClueVisible: {
      type: Boolean,
      default: false,
      required: true
    }
  }
)
const title = ref("线索转换")
// 表单数据
const formData = ref({
  clueId: '',
  customerName: '',
  contactName: '',
  createTransaction: false,
  amount: '',
  transactionName: '',
  estimatedDate: '',
  stage: '',
  marketSource: '',
  marketName:'',
  owner: '',
});
//阶段
const stages = ref([])


// 表单校验规则
const rules = {
  amount: [
    { required: true, message: '请输入金额', trigger: 'blur' },
    { type: 'number', message: '金额必须是数字', trigger: 'blur' },
  ],
  transactionName: [{ required: true, message: '请输入交易名称', trigger: 'blur' }],
  estimatedDate: [{ required: true, message: '请选择预计成交日期', trigger: 'change' }],
  stage: [{ required: true, message: '请选择阶段', trigger: 'change' }],
};

const emits = defineEmits(['update:modelValue', 'initOptions'])
// 表单引用
const formRef = ref(null);
const activiyTableVisible = ref(false)
// 提交表单
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {

      const res = await requestUtil.post('crmCustomer/convertClue', formData.value)
      let data = res.data;
      if (data.code == 1) {
        ElMessage.success("执行成功！")
        formRef.value.resetFields();
        formData.value = {};
        onCancel();
        ElMessage.success('表单提交成功');
      } else {
        ElMessage.error(data.message);
      }
    } else {
      ElMessage.error('表单校验失败');
    }
  });
};

// 取消表单
const onCancel = () => {
  emits('update:modelValue', false);
  emits('initOptions')
};
//初始化数据
const initCLue = async (id) => {
  const res = await requestUtil.getRestFulApi("crmClue/getClueinfo/{id}", { id: id })
  formData.value.contactName = res.data.data.fullname
  formData.value.customerName = res.data.data.company
  formData.value.owner = res.data.data.owner
  formData.value.clueId = id
  title.value = `线索转换-${formData.value.contactName}-${formData.value.customerName}`
  //初始化下拉框
  const stage = await requestUtil.getRestFulApi("crmDataValue/getDataVluesByCode/{codeName}", { codeName: 'stage' })
  stages.value = stage.data.data

}

// 设置活动
const setMarketSource = (id,name) => {
  formData.value.marketSource = id
  formData.value.marketName = name
}

watch(
  () => props.convertClueVisible,
  () => {
    let id = props.clueId;
    if (id != "" && props.convertClueVisible) {
      initCLue(id);
    }
  }
)

// 设置活动
const openActivityTable = () => {

  activiyTableVisible.value = true
}
</script>

<style scoped></style>